<template>
  <view class="content">
    <view class="title">子组件B</view>
    <!-- 显示兄弟组件A传过来的值 -->
    <view class="b-box">
      CompA组件传进来的值：
      <text class="intent-text-box">{{ result }}</text>
    </view>

    <!-- 回传值区域（子传父） -->
    <view class="b-box" style="margin: 10rpx;">
      <text>回传值：</text>
      <input 
        type="text" 
        v-model="callbackValue" 
        style="color: black; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 10rpx; border-radius: 4rpx;" 
      />
      <button @click="sendOutside()" size="mini">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: '', // 存储兄弟组件A传过来的值
      callbackValue: '' // 存储要回传给父组件的值
    }
  },
  created() {
    // 监听兄弟组件A的传值事件
    uni.$on('getIntent', (msg) => {
      this.result = msg
    })
  },
  methods: {
    // 向父组件回传值
    sendOutside() {
      this.$emit('callbackFun', this.callbackValue)
    }
  }
}
</script>

<style scoped>
.content {
  background-color: #57f978;
  padding: 30rpx;
  margin: 20rpx 0;
}
.title {
  font-size: 50rpx;
  margin-bottom: 20rpx;
}
.b-box {
  margin: 10rpx 0;
}
.intent-text-box {
  background-color: #fff;
  padding: 5rpx 10rpx;
}
</style>